<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .ul{
            position: relative;
            margin: 50px auto;
            width: 850px;
            height: 350px;
            border: 1px solid red;
            list-style: none;
        }
        li{
            position: absolute;
            bottom: 0;
            width: 50px;
            background-color: lightgreen;
        }
        button{
            padding: 15px 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-left: 100px;
            background-color: transparent;
        }
    </style>
</head>
<body>
    <ul class="ul">
        
    </ul>

    <button class="btn-start">生成柱状图</button>
    <button class="btn-sort">开始排序</button>

    <script src="../jquery/jquery.min.js"></script>
    <script>
        var str = '';
        var arr = [];
        // 自动生成柱状图高度 50-299   
        $('.btn-start').on('click', function () {
            for (var i = 0; i < 9; i++) {
                console.log(i);
                var height = getHeight();
                // 随机高度去重
                if (arr.indexOf(height) !== -1) {
                    i--;
                    continue
                }
                str += '<li style="height: ' + height + 'px;left: ' + (40 + 90*i) + 'px"></li>';
                arr.push(height);
            }
            $('.ul').html(str)
            str = '';
            arr = [];
        })
        // 获取随机高度
        function getHeight() {
            return Math.floor(Math.random()*250 / 20) * 20 + 50;
        }
        // 冒泡排序
        $('.btn-sort').on('click', function () {
            for (var i = 0; i < $('li').length - 1; i++) {
                for (var j = 0; j < $('li').length-1-i; j++) {
                    if ($('li').eq(j).height() > $('li').eq(j+1).height()) {
                        var temp = $('li').eq(j).height();
                        $('li').eq(j).height($('li').eq(j+1).height());
                        $('li').eq(j+1).height(temp);
                    }
                }
            }
        })
    </script>
</body>
</html>